<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./libs/jquery-3.5.1.min.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="./libs/utils.js"></script>
</head>

<body>
    <nav class="navbar navbar-default navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">个性化推荐系统<span class="sr-only">(current)</span></a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">关于</a></li>

                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li>

                        <a href="" data-toggle="modal" data-target="#login">

                            <span class="glyphicon glyphicon-log-in"></span>

                            <span id="loginText">登录</span>

                        </a>

                    </li>
                    <li>

                        <a href="" data-toggle="modal" data-target="#register">

                            <span class="glyphicon glyphicon-user"></span>

                            <span id="registText">注册</span>

                        </a>

                    </li>

                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <!-- 登录注册弹框 -->
    <!-- 注册 -->

    <div id="register" class="modal fade" tabindex="-1">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-body">

                    <button class="close" data-dismiss="modal">

                        <span>&times;</span>

                    </button>

                </div>

                <div class="modal-title">

                    <h1 class="text-center">注册</h1>

                </div>

                <div class="modal-body">

                    <form class="form-group" action="./api/user/reg.php" method="GET" id='form-reg'>

                        <div class="form-group">

                            <label for="">用户名</label>

                            <input class="form-control" type="text" placeholder="6-15位字母或数字" name="name">

                        </div>

                        <div class="form-group">

                            <label for="">密码</label>

                            <input class="form-control" type="password" placeholder="至少6位字母或数字" name="pwd">

                        </div>
                        <div class="text-right">

                            <button class="btn btn-primary" type="button" id="btn-submit"
                                style="background-color: #3a8cd2b3;border: 0px solid transparent;">提交</button>

                            <button class="btn btn-danger" data-dismiss="modal"
                                style="background-color: #fb5e5999;border: 0px solid transparent;">取消</button>

                        </div>

                        <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">

                            <font style="font-size: 13px;">已有账号？点我登录</font>

                        </a>

                    </form>
                    <p id="msgWrap" class="text-center"></p>

                </div>

            </div>

        </div>

    </div>

    <!-- 注册 end-->

    <!-- 登录 -->

    <div id="login" class="modal fade">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-body">

                    <button class="close" data-dismiss="modal">

                        <span>&times;</span>

                    </button>

                </div>

                <div class="modal-title">

                    <h1 class="text-center">登录</h1>

                </div>

                <div class="modal-body">

                    <form class="form-group" action="./api/user/login.php" method="GET" id="form-login">

                        <div class="form-group">

                            <label for="">用户名</label>

                            <input class="form-control" type="text" placeholder="" name="name">

                        </div>

                        <div class="form-group">

                            <label for="">密码</label>

                            <input class="form-control" type="password" placeholder="" name="pwd">

                        </div>

                        <div class="text-right">

                            <button class="btn btn-primary" type="button" id="btn-login"
                                style="background-color: #3a8cd2b3; border: 0px solid transparent;">登录</button>

                            <button class="btn btn-danger" data-dismiss="modal"
                                style="background-color: #fb5e5999;border: 0px solid transparent;">取消</button>

                        </div>

                        <a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">

                            <font style="font-size: 13px;">还没有账号？点我注册</font>

                        </a>

                    </form>
                    <p id="msgWrap-login" class="text-center"></p>
                </div>

            </div>

        </div>

    </div>


    <!-- 主题内容 -->
    <div class="container">
        <button type="button" class="btn btn-primary btn-sm active " data-toggle="modal"
            data-target="#addModal">添加</button>

        <!-- 模态框 -->
        <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">商品添加</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="inputName" class="col-sm-2 control-label">商品名称</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="inputName" placeholder="请输入商品名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPrice" class="col-sm-2 control-label">商品价格</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="inputPrice" placeholder="请输入商品价格">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputNum" class="col-sm-2 control-label">商品数量</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="inputNum" placeholder="请输入商品数量">
                                </div>
                            </div>
                        </form>
                       
                    </div>
                    <p id="msgWrap-add" class="text-center"></p>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="btn-add">添加</button>
                    </div>
                    
                </div>
            </div>
        </div>
        <!-- 表格 -->
        <table class="table .table-striped table-hover table-condensed table-shop">
            <thead>
                <tr class="head-tr">
                    <td>编号</td>
                    <td>商品名称</td>
                    <td>商品价格</td>
                    <td>商品数量</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="shop-tbody" class="tbody-shop">
                <!-- <tr class="danger">
                    <td>编号</td>
                    <td>商品名称</td>
                    <td>商品价格</td>
                    <td>商品数量</td>
                    <td>
                        <button class="btn btn-xs btn-info btn-edit">编辑</button>
                        <button class="btn btn-xs btn-danger btn-del">删除</button>
                        <button class="btn btn-xs btn-success btn-ok">确定</button>
                        <button class="btn btn-xs btn-warning btn-cancel">取消</button>
                    </td>

                </tr>
                <tr class="success">
                    <td>编号</td>
                    <td>商品名称</td>
                    <td>商品价格</td>
                    <td>商品数量</td>
                    <td>操作</td>
                </tr> -->
            </tbody>
        </table>
    </div>
    <script src="./js/reg.js"></script>
    <script src="./js/login.js"></script>
    <script src="./js/sel.js"></script>
    <script src="./js/add.js"></script>
    <script src="./js/deit.js"></script>
    <script src="./js/dele.js"></script>
</body>

</html>